<template>
<div class="good-add-container">
  <!-- 表单 S -->
  <el-form
    :model="ruleForm"
    :rules="rules"
    ref="ruleForm"
    label-width="100px"
    class="demo-ruleForm"
  >
    <el-form-item label="商品名称" prop="name">
      <el-input v-model="ruleForm.name" />
    </el-form-item>

    <el-form-item label='商品描述' prop='desc'>
      <el-input type="textarea" v-model="ruleForm.desc" />
    </el-form-item>

    <el-form-item label="商品品类" prop="cate">
      <selectadmin v-model="ruleForm.cate"/>
    </el-form-item>

    <el-form-item label='商品价格' prop='price'>
        <el-input-number
        v-model.number="ruleForm.price"
        :min="0" 
        >
        </el-input-number>    
        </el-form-item>

    <el-form-item label='是否热销' prop='hot'>
      <el-switch
        v-model="ruleForm.hot"
        inactive-color="#dddddd">
      </el-switch>
    </el-form-item>

    <el-form-item label='商品图片' prop='list'>
      <!-- action用于指定上传图片时的url -->
      <el-upload
        action="http://localhost:9527/api/v1/upload/img"
        name="xxx"
        :multiple='false'
        :limit='2'
        :on-success="getimgpath"
        list-type="picture-card">

          <i slot="default" class="el-icon-plus"></i>

          <div slot="file" slot-scope="{file}">
            <img
              class="el-upload-list__item-thumbnail"
              :src="file.url" alt=""
            >
          </div>
      </el-upload>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="submitForm">立即添加</el-button>
    </el-form-item>

  </el-form>
    
</div>
    
</template>
<script>
import selectadmin from './components/select.vue'
import { goodadd } from '@/api/good'


export default {
  name:'Goodadd',
  components:{
      selectadmin
  },
    data(){
        return{
            ruleForm:{
                name:'',
                desc:'',
                cate:'',
                price:10,
                hot:false,
                img:'',

            },
            rules:{
                name: [
                { required: true, message: '请输入商品名称', trigger: 'blur' },
                { min: 4, max: 10, message: '长度在 2 到 10个字符', trigger: 'blur' }
            ],
                desc:[
                { required: true, message: '请输入商品描述', trigger: 'blur' },
                { min: 10, max: 40, message: '长度在 10 到 40 个字符', trigger: 'blur' }
            ],
                cate:[
                { required: true, message: '请输入商品类别', trigger: 'blur' },
            ],
                price:[
                { required: true, message: '请输入商品价格', trigger: 'blur' },
    
            ],  
                list:[
                { required: true, message: '请上传商品图片', trigger: 'change' }
            ]
            }
        }
    },
    methods:{
        // 提交功能
        submitForm(){
          let that = this
            goodadd(this.ruleForm).then(()=>{
              console.log("添加成功");
                this.$message({
                  message: '恭喜你，添加成功',
                  type: 'success',
                    onClose(){
                  that.$router.back()
                }

              })
           })

        },
        getimgpath(res){
          console.log("成功图片地址",res);
          this.ruleForm.img = res.data.url
        }
    }
    
}
</script>
<style scoped>
.good-add-container{
    padding: 20px;
    box-sizing: border-box;
    width: 60%;

}


</style>